<template>
<div class="hello">
  <scroller ref="myScroller" :on-infinite="infinite">
    <div class="top-box">
      <div class="top-one">
        <div class="one-left">
          <i class="icon iconfont icon-dingwei"></i>
          <span>东城区北京市政府</span>
          <i class="icon iconfont icon-xiajiantou"></i>
        </div>
        <div class="one-right">
          123
        </div>
      </div>
      <div class="top-two">
        搜索商家、商品
      </div>
      <div class='top-three'>
        <div class="swiper-container" id="swiper-one">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="width:auto">披萨</div>
            <div class="swiper-slide" style="width:auto">我是一只鸡</div>
            <div class="swiper-slide" style="width:auto">凉面</div>
            <div class="swiper-slide" style="width:auto">肯德基</div>
            <div class="swiper-slide" style="width:auto">健身餐</div>
            <div class="swiper-slide" style="width:auto">汉堡</div>
            <div class="swiper-slide" style="width:auto">炸鸡</div>
            <div class="swiper-slide" style="width:auto">眉州小吃</div>
            <div class="swiper-slide" style="width:auto">星巴克</div>
            <div class="swiper-slide" style="width:auto">周黑鸭</div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav-bar">
      <div class="swiper-container swiper-two">
        <div class="swiper-wrapper">
          <div class="swiper-slide">slider1</div>
          <div class="swiper-slide">slider2</div>
          <div class="swiper-slide">slider3</div>
          <div class="swiper-slide">slider4</div>
          <div class="swiper-slide">slider5</div>
          <div class="swiper-slide">slider6</div>
          <div class="swiper-slide">slider7</div>
          <div class="swiper-slide">slider8</div>
          <div class="swiper-slide">slider9</div>
          <div class="swiper-slide">slider10</div>
          <div class="swiper-slide">slider11</div>
          <div class="swiper-slide">slider12</div>
          <div class="swiper-slide">slider13</div>
          <div class="swiper-slide">slider14</div>
          <div class="swiper-slide">slider15</div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="shop-box">
      <h3>推荐商家</h3>
      <ul>
        <router-link tag="li" :to="{path:'/hh/'+index } " v-for="(s,index) in sellers ">
          <div class="shop-left ">
            <img :src="s.avatar " alt="1 " style="width:100%;height:55% " />
          </div>
          <div class="info ">
            <div class="info-one ">
              <P style="color:#333;font-weight: 700;font-size:@base*30rem; ">
                <span>品牌</span> {{s.name}}
              </P>
              <p style="color:#999;font-size:@base*4rem; ">
                保票
              </p>
            </div>
            <div class="info-two ">
              <p>
                月售{{s.sellCount}}单
              </p>
              <p>
                <span>
                  {{s.description}}
                </span>
              </p>
            </div>
            <div class="info-three ">
              <P>
                {{s.minPrice}}元起送 / 配送费{{s.deliveryPrice}}
              </P>
              <P>
                1.14km /<span>{{s.deliveryTime}}分钟</span>
              </P>
            </div>
            <div class="shop-botm ">
              <div class="botm-four ">
                <span>新</span>
                <p style="color: #939393 ">
                  新用户下单立 减17.0元
                </p>

              </div>
              <div class="botm-five ">
                <span>
                  减
                </span>
                <p style="color: #939393 ">
                  满50元减15，满80减25，满120减40
                </p>

              </div>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </scroller>
  <footerbar></footerbar>
</div>
</template>

<script>
import Vue from 'vue'
import footerbar from './fotter.vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

export default {
  data() {
    return {
      noData: false,
      sellers: [],
      toseller: []
    }
  },
  components: {
    footerbar,
    VueAwesomeSwiper
  },
  mounted() {
    var mySwiper = new Swiper('#swiper-one', {
      direction: 'horizontal',
      slidesPerView: 'auto'
    })

    var mySwiper = new Swiper('.swiper-two', {
      pagination: '.swiper-pagination',
      slidesPerView: 'auto',
      slidesPerColumn: 2,
      slidesPerView: 4,
      slidesPerGroup: 8
    })

    //获取seller数据初始化
    this.$http.get(
      'http://localhost:8080/api/seller'
    ).then((res) => {
      if (res.data.errno == 0) {
        this.toseller = res.data.data;
        let temp = this.toseller.concat();
        this.sellers = temp.splice(0, 5)
        console.log(this.sellers.length)
      }
    }, (res) => {
      console.log('请求失败')
    })
  },
  methods: {
    infinite(done) {
      let start = this.sellers.length;
      let self = this;

      if (this.noData) {
        setTimeout(() => {
          self.$refs.myScroller.finishInFinite(2);
        });
        return;
      }

      setTimeout(() => {
        let total = self.toseller.concat(0);
        let temp = total.splice(start, 10);
        if (temp.length == 0) {
          self.noData = true;
        }
        this.sellers = this.sellers.concat(temp)
        self.$refs.myScroller.resize();
        done()
      }, 1500)
    },
    // refresh(){
    //   console.log("refresh")
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../../static/less/var.less';
.hello {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: @base*100rem;
    .top-box {
        padding: @base*10rem @base*42rem;
        height: @base*280rem;
        background: @mc;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .top-one {
            width: 100%;
            height: @base*90rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            color: #fff;
            .one-left {
                width: @base*450rem;
                height: 100%;
                line-height: @base*90rem;
                font-size: @base*36rem;
            }
            .one-right {
                width: @base*167rem;
                height: 100%;
                line-height: @base*90rem;
                text-align: center;
            }
        }
        .top-two {
            width: 100%;
            height: @base*85rem;
            background: #fff;
            text-align: center;
            line-height: @base*96rem;
            border-radius: 5%;
            cursor: pointer;
            font-size: @base*30rem;
        }
        .top-three {
            width: 100%;
            height: @base*55rem;
            .swiper-slide {
                padding: @base*10rem;
                font-size: @base*24rem;
                color: #fff;
            }
        }
    }
    .nav-bar {
        width: 100%;
        height: @base*354rem;
        .swiper-container {
            width: 100%;
            height: 100%;
            .swiper-slide {
                width: 25%;
                height: 50%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .shop-box ul {
        width: 100%;
        li {
            width: 100%;
            height: @base*230rem;
            display: flex;
            border-top: 1px solid #ccc;
            padding-bottom: @base*20rem;
            .shop-left {
                width: @base*120rem;
                height: @base*214rem;
                padding: @base*30rem @base*20rem;
            }
            .info {
                width: @base*570rem;
                height: @base*214rem;
                padding: @base*30rem @base*20rem @base*30rem 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                .info-one {
                    width: 100%;
                    height: @base*40rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #333;
                    p {
                        height: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    span {
                        display: block;
                        background: #FFD930;
                        text-align: center;
                    }
                }
                .info-two {
                    width: 100%;
                    height: @base*32rem;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    color: #666;
                    font-size: @base*3rem;
                    span {
                        display: block;
                        width: @base*100rem;
                        height: @base*30rem;
                        text-align: center;
                        line-height: @base*30rem;
                        background: #2395FF;
                        color: #fff;
                        border-radius: 15%;
                    }
                }
                .info-three {
                    width: 100%;
                    height: @base*32rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #666;
                    font-size: @base*3rem;
                    span {
                        color: #2395FF;
                    }
                }
                .shop-botm {
                    width: 100%;
                    height: @base*74rem;
                    padding-top: @base*9rem;
                    border-top: 1px solid #ccc;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: @base*2rem;
                    .botm-four {
                        width: 100%;
                        height: @base*32rem;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span {
                            background: #70BC46;
                            color: #fff;
                        }
                    }
                    .botm-five {
                        width: 100%;
                        height: @base*32rem;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span {
                            background: #F07373;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}
</style>
